<template>
    <main>
        <header>
            <div style="padding:0">
                <div class="search">
                    <div>
                        <div class="div_span"><span>护士套装</span></div>
                        <div class="div_icon"><font-awesome-icon icon="search" class="icon"/></div>
                    </div>
                </div>
            </div>
            <div style="padding:0">
                <img src="../assets/images/kq/6e71fee018b82c34adfda64b0af0e911.jpg" alt="" style="width: 100vw;"> 
            </div>
            <div style="padding:0;width:100vw;height:20.267vw;position:relative">
                <img src="../assets/images/kq/0998b1fbe5a3b66599104695be4eb1fc.jpg" alt="" style="width: 100vw;position:absolute"> 
                <div class='com1'>
                    <div></div>
                    <div><span>999999</span><span> 人抢购中</span></div>
                </div>
            </div>
            <div style="padding:0;width:100vw;position:relative">
                <div style="width: 100vw;height:10.133vw;">
                    <img src="../assets/images/kq/1/f75153a266df4a316878f7bcb2853812.jpg" alt="" style="width: 100vw;height:10.133vw;">
                </div>
                <div class="com2">
                    <img src="../assets/images/kq/1/mst_1f48d3c243dc35af09e81b37c2e88e65_260x350_90.jpg" alt="">
                    <img src="../assets/images/kq/1/mst_df29984b492122da0e0eec3daa05ee12_230x350_90.jpg" alt="">
                    <img src="../assets/images/kq/1/mst_18f03f1c619d9a3968d751c260814d06_260x350_90.jpg" alt="">
                    <ul>
                        <li v-for="(item,index) in com2">
                            <div>
                                <img :src="item.src" alt="">
                            </div>
                            <div class="com2_span">
                                <span>{{item.name}}</span>
                            </div>
                            <div class="com2_span2">
                                <span>{{item.msg}}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </header>      
        <component :is='vip'></component>
    </main>
</template>
<script>
    import comList from './kq_list.vue';
    export default{
        components:{
            'comList':comList,
        },
        data(){
            return {
                vip:'comList',
                com2:[],
            }
        },
        mounted(){
            this.$http.get('./data/kq.json', {

            })
            .then((response)=> {
                console.log(response);
                this.com2=response.data.com2
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            });  
        }
    }
</script>
<style scoped>
    main{
        background-color: #f5f5f5;
    }
    header>div>img{
        width: 94vw;
    }
    header>div{
        position: relative;
        clear: both;
        padding: 0 3vw; 
    }
    .search{
        width: 100vw;
        height: 13.333vw;
        background-image: url('../assets/images/kq/4980a0a8fb5202cebe205d6dcacc8dd2.jpg');
        background-size: 100% 100%;
        padding: 3vw 4vw;   
    }
    .search>div{
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #f3f4f4;
        border-radius: 1vw;
        line-height: 6.733vw;
    }
    .icon{
        /* width: 100%;
        height: 100%; */
        color:grey;
    }
    .div_icon{
        height: 100%;
        width: 10vw;
        position: absolute;
        right: 0;
        text-align: center;
    }
    .div_span{
        height: 100%;
        /* width: 10vw; */
        padding: 0 3vw;
        position: absolute;
        left: 0;
        text-align: center;
        color: #99999f;
    }
    .com1{
        position: absolute;
        top:6vw;
        margin-left: 25vw;
    }
    .com1>div{
        float: left;
    }
    .com1>div:nth-of-type(1){
        width:20vw;
        height: 5vw;
    }
    .com1>div:nth-of-type(2)>span{
        font-size: 2.5vw;
        color: white;
    }
    .com2{
        width:100vw;
        height:46.667vw;
        text-align: center;
    }
    .com2>img{
        float: left;
        /* width: calc(100vw/3); */
        height:46.667vw;
    }
    .com2>ul{
        position: absolute;
        height: 100vw;
        padding: 0 3vw 0 4vw;
        height: 46.667vw;
    }
    .com2>ul>li{
        float: left;
        height: 100%;
        width: 30vw;      
        padding-top: 3.3vw;
    }
    .com2>ul>li>div:nth-of-type(1){
        height: 30vw;
    }
    .com2>ul>li>div>img{
        width: 100%;
        border-radius: 1vw 1vw 0 0;
    }
    .com2>ul>li:nth-of-type(1){
        margin-left: 0.2vw;
        margin-right:0.8vw;
    }
    .com2>ul>li:nth-of-type(2){
        margin-left: 0.05vw;
        margin-right:0.95vw;
    }
    .com2>ul>li:nth-of-type(3){
        margin-left: -0.15vw;
        margin-right:1.15vw;
    }
    .com2_span{
        margin-top: 1vw;
    }
    .com2_span2{
        margin-top: 1vw;
        line-height: 2vw;
    }
    .com2_span2>span{
        font-size: 2vw;
    }
    
</style>